<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-drawer
    :title="!modifyStatus ? '添加' : '修改'"
    :visible="visible"
    @close="cancel"
    :body-style="{ paddingBottom: '80px' }"
    :width="750"
  >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 10px">
      <el-form-item label="姓名" >
        <el-input v-model="dataForm.examName" placeholder="请输入姓名" size="small"></el-input>
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input v-model="dataForm.examPhone" placeholder="请输入手机号" size="small"></el-input>
      </el-form-item>
      <el-form-item label="日期时间（年）" >
        <el-input v-model="dataForm.examYear" placeholder="请输入日期时间（年）" size="small"></el-input>
      </el-form-item>
      <el-form-item label="日期时间（月）" >
        <el-input v-model="dataForm.examMoon" placeholder="请输入日期时间（月）" size="small"></el-input>
      </el-form-item>
      <el-form-item label="日期时间（日）" >
        <el-input v-model="dataForm.examSun" placeholder="请输入日期时间（日）" size="small"></el-input>
      </el-form-item>
      <el-form-item label="日期（周一到周日）" >
        <el-input v-model="dataForm.examCircumference" placeholder="请输入日期（周一到周日）" size="small"></el-input>
      </el-form-item>
      <el-form-item label="时间段id" >
        <el-input v-model="dataForm.examTimeSlotId" placeholder="请输入时间段id" size="small"></el-input>
      </el-form-item>
      <el-form-item label="时间段（9-9：20等）" >
        <el-input v-model="dataForm.examTimeSlotName" placeholder="请输入时间段（9-9：20等）" size="small"></el-input>
      </el-form-item>
      <el-form-item label="腾讯会议房间号" >
        <el-input v-model="dataForm.examRoom" placeholder="请输入腾讯会议房间号" size="small"></el-input>
      </el-form-item>
      <el-form-item label="创建者" >
        <el-input v-model="dataForm.createBy" placeholder="请输入创建者" size="small"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" >
        <el-input v-model="dataForm.createDate" placeholder="请输入创建时间" size="small"></el-input>
      </el-form-item>
      <el-form-item label="更新者" >
        <el-input v-model="dataForm.updateBy" placeholder="请输入更新者" size="small"></el-input>
      </el-form-item>
      <el-form-item label="更新时间" >
        <el-input v-model="dataForm.updateDate" placeholder="请输入更新时间" size="small"></el-input>
      </el-form-item>
      <el-form-item label="备注信息-身份证号" >
        <el-input v-model="dataForm.remarks" placeholder="请输入备注信息-身份证号" size="small"></el-input>
      </el-form-item>
      <el-form-item label="是否面试（0未面试；1：已面试）" >
        <el-input v-model="dataForm.delFlag" placeholder="请输入是否面试（0未面试；1：已面试）" size="small"></el-input>
      </el-form-item>
    </el-form>
    <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
      <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import api from '@/api/api'
import uploadImg from '@/components/Upload/uploadImg.vue'
export default {
  components: {
    uploadImg
  },
  data () {
    return {
      modifyStatus: false,
      visible: false,
      selOptions: {},
      loading:false,
      dataForm: {
        id: 0,
        examName: '' ,
        examPhone: '' ,
        examYear: '' ,
        examMoon: '' ,
        examSun: '' ,
        examCircumference: '' ,
        examTimeSlotId: '' ,
        examTimeSlotName: '' ,
        examRoom: '' ,
        createBy: '' ,
        createDate: '' ,
        updateBy: '' ,
        updateDate: '' ,
        remarks: '' ,
        delFlag: ''
      },
      dataRule: {
        examName: [
          { required: true, message: '姓名  为必填项', trigger: 'blur' }
        ],
        examPhone: [
          { required: true, message: '手机号  为必填项', trigger: 'blur' }
        ],
        examYear: [
          { required: true, message: '日期时间（年）  为必填项', trigger: 'blur' }
        ],
        examMoon: [
          { required: true, message: '日期时间（月）  为必填项', trigger: 'blur' }
        ],
        examSun: [
          { required: true, message: '日期时间（日）  为必填项', trigger: 'blur' }
        ],
        examCircumference: [
          { required: true, message: '日期（周一到周日）  为必填项', trigger: 'blur' }
        ],
        examTimeSlotId: [
          { required: true, message: '时间段id  为必填项', trigger: 'blur' }
        ],
        examTimeSlotName: [
          { required: true, message: '时间段（9-9：20等）  为必填项', trigger: 'blur' }
        ],
        examRoom: [
          { required: true, message: '腾讯会议房间号  为必填项', trigger: 'blur' }
        ],
        createBy: [
          { required: true, message: '创建者  为必填项', trigger: 'blur' }
        ],
        createDate: [
          { required: true, message: '创建时间  为必填项', trigger: 'blur' }
        ],
        updateBy: [
          { required: true, message: '更新者  为必填项', trigger: 'blur' }
        ],
        updateDate: [
          { required: true, message: '更新时间  为必填项', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '备注信息-身份证号  为必填项', trigger: 'blur' }
        ],
        delFlag: [
          { required: true, message: '是否面试（0未面试；1：已面试）  为必填项', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (id) { // 初始化表单验证规则
      this.dataForm.id = id || undefined
      this.visible = true
      this.selOptions=this.$constants.selOptions;
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.id){
          this.loading = true
          this.modifyStatus=true;
          api.post('rest/v1/reservation/info',{id:this.dataForm.id}).then(res => {
            this.dataForm = res;
          }).finally(() => {
            this.loading = false
          });
        }
      })
    },
    // 表单数据提交
    submit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let postData=Object.assign({},this.dataForm)
          if (!this.modifyStatus){
            postData.id==undefined
            api.post('rest/v1/reservation/save',postData).then(res =>{
              this.$message.success("创建成功")
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            });
          }else{
            api.post('rest/v1/reservation/update',postData).then(res =>{
              this.$message.success("操作成功")
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            });
          }
        }
      })
    },
    cancel(){
      this.visible = false
      this.reset()
    },
    reset(){
      this.$refs.dataForm.resetFields()
      this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
      //图片回写
      //this.$refs["childData"].fileList=[]
    }
  }
}
</script>
